<template>
	<div class="content">
		<van-nav-bar title="标题" right-text="按钮" left-arrow @click="onClickLeft" />
		<van-button type="primary">主要按钮</van-button>
		<van-action-sheet v-model:show="showActionSheet" :actions="actions" cancel-text="取消" description="请选择一个操作" />

		<div class="logo-img">
			<image class="img100" src="../../static/images/common/logo.png" mode="widthFix"></image>
		</div>
		<div class="form-wrap">
			<div class="form-dl flex-align">
				<input class="form-input flex1" v-model="formData.name" placeholder="字母(开头)/数字/下划线的5-16位"
					maxlength="16" />
			</div>
			<div class="form-dl flex-align">
				<input class="form-input flex1" v-model="formData.password" placeholder="请输入6-12位数字或者字母"
					maxlength="16" />
			</div>
			<div class="flex-align mt50">
				<div class="form-submit flex-center-align" @click="login(1)">
					<span>登录</span>
				</div>
				<div class="form-submit form-submit2 flex-center-align" @click="login(2)">
					<span>注册</span>
				</div>

			</div>
			<div style="height: 50px;width: 50px;"></div>
			<div class="mmm"></div>
			<div class="mt50">
				<van-button>默认按钮</van-button>
			</div>
		</div>
		<!-- 忘记密码 -->
		<div class="lbody-agree flex-center-align">
			<span @click="used.href('/pages/my/withdrawPassword/forgetPassword2')">忘记密码</span>
		</div>
		<!--  -->
	</div>
</template>

<script setup>
import checker from '@/utils/checker';
import apiCommon from '@/api/common.js';
import { useAuthStore } from '@/store/authStore'; // 引入 Pinia Store
const authStore = useAuthStore(); // 获取 token 实例
console.log(authStore.token);
import {
	ref,
	reactive,
	inject
} from "vue";
let used = inject('used');
let api = inject('api');
let token = ref(null); //登录返回的token
//
let formData = reactive({
	name: 'x123456', //名字
	password: 'aaa111', //密码
})
let showActionSheet = ref(false);
let actions = ref([
	{
		name: '选项1',
		subname: '描述信息'
	},
	{
		name: '选项2',
		subname: '描述信息'
	},
	{
		name: '选项3',
		subname: '描述信息'
	}
]);
const onClickLeft = (item) => {
	console.log('---123');
	console.log(item);
	showActionSheet.value = true
};
//协议
let isAgree = ref(false);

function isgreeFun() {
	isAgree.value = !isAgree.value;
}
//登录
async function login(type) {
	if (!checker.IsEmpty(formData.name)) {
		used.msg('请输入账号')
		return false;
	}
	if (!checker.Islegal(formData.name)) {
		used.msg('输入的账号规则不正确')
		return false;
	}
	if (!checker.IsEmpty(formData.password)) {
		used.msg('请输入密码')
		return false;
	}
	if (!checker.IsPassword(formData.password)) {
		used.msg('输入的密码规则不正确')
		return false;
	}
	let params = {
		name: formData.name,
		password: formData.password,
	}
	let res;
	used.msgLoading('登录中...');

	//登录
	if (type == 1) {
		res = await api.user.login(params);
		used.msg(res.msg)
		if (res.code == 200) {
			token.value = res.data
			setStorageData()
		} else {
		}
	}
	//注册
	if (type == 2) {
		res = await apiCommon.register(params);
		used.msg(res.msg)
		if (res.code == 200) {
			login(1);
		} else {
			// uni.hideLoading();
		}
	}
}
//登录成功
function setStorageData() {
	console.log(token.value);
	authStore.setToken(token.value);
	// used.getInfo(this); //初始化数据 - 导航栏
	setTimeout(function () {
		back()
	}, 1000)
}
//暂不登录
function back() {
	used.href('/home', {
		type: 3
	})
}
</script>

<style lang="scss" scoped>
.content {
	position: relative;
	padding: 0 30px;
	min-height: 100vh;
	background-color: #fff;
	overflow: hidden;
	.mmm{
		width: 50px;
		height: 50px;
	}
	/**/
	.form-wrap {

		.form-dl {
			align-items: stretch;
			height: 110px;

			.form-input {
				.u-input__input {
					font-size: 30px;
				}
			}

			.login-sms {
				margin-left: 20px;
				width: 170px;
				height: 60px;
				border-radius: 30px;

				text {
					font-size: 28px;
					color: #0586F0;
					background-color: #fff;

					&.yzmno {
						color: #999;
					}
				}
			}
		}

		.form-text {
			margin-top: 35px;
			font-size: 26px;
			color: #ff7a18;
			line-height: 39px;
		}

		.form-submit {
			width: 650px;
			height: 100px;
			background: #0586f0;
			border-radius: 50px;
			font-size: 32px;
			color: #ffffff;
		}

		.form-submit2 {
			margin-left: 50px;
			background: #67C23A;
		}
	}

	/**/
	.logo-img {
		margin: 100px auto 100px;
		width: 200px;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
	}

	.lbody-agree {
		padding: 50px 0 0;

	}

}
</style>